<template>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="All" name='first'>
      <el-table :data="firstData" style="width: 100%">
        <el-table-column prop="date" label="Description" width="180"> </el-table-column>
        <el-table-column prop="name" label="Target" width="180"> </el-table-column>
        <el-table-column prop="address" label="Last Pipeline"> </el-table-column>
        <el-table-column prop="address" label="Next Run"> </el-table-column>
        <el-table-column prop="address" label="Owner"> </el-table-column>
        <el-table-column prop="address" label="">
          <template #default="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">执行</el-button>
            <el-button size="mini">编辑1</el-button>
            <el-button size="mini" type="danger" @click.prevent="deleteRow(scope.$index, tableData)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-tab-pane>

    <el-tab-pane label="Active" name='second'>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="date" label="Description" width="180"> </el-table-column>
        <el-table-column prop="name" label="Target" width="180"> </el-table-column>
        <el-table-column prop="address" label="Last Pipeline"> </el-table-column>
        <el-table-column prop="address" label="Next Run"> </el-table-column>
        <el-table-column prop="address" label="Owner"> </el-table-column>
        <el-table-column prop="address" label="">
          <template #default="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">执行</el-button>
            <el-button size="mini">编辑2</el-button>
            <el-button size="mini" type="danger" @click.prevent="deleteRow(scope.$index, tableData)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-tab-pane>

    <el-tab-pane label="Inactive" name='third'>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="date" label="Description" width="180"> </el-table-column>
        <el-table-column prop="name" label="Target" width="180"> </el-table-column>
        <el-table-column prop="address" label="Last Pipeline"> </el-table-column>
        <el-table-column prop="address" label="Next Run"> </el-table-column>
        <el-table-column prop="address" label="Owner"> </el-table-column>
        <el-table-column prop="address" label="">
          <template #default="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">执行</el-button>
            <el-button size="mini">
              <!-- <i class="el-icon-edit-outline"></i>  -->
              <el-icon :color="color">
                <edit />
              </el-icon>
            </el-button>
            <el-button size="mini" type="danger" @click.prevent="deleteRow(scope.$index, tableData)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-tab-pane>
  </el-tabs>

</template>

<script>
  import { Edit } from '@element-plus/icons'
  import { pipelineScheduleList } from '@/utils/common.js'
  export default {
    data() {
      return {
        tableData: [
          {
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄',
          },
          {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄',
          },
          {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄',
          },
          {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄',
          },
        ],
        firstData: []
      }
    },
    methods: {
      handleEdit(index, row) {
        console.log(index, row)
      },
      handleDelete(index, row) {
        console.log(index, row)
      },

      deleteRow(index, rows) {
        rows.splice(index, 1)
      },
      handleClick(tab, event) {
        console.log(tab, event)
        if (tab.props.name === 'first') {
          this.test()
        }
      },
      async test() {
        await pipelineScheduleList().then(res => {

          console.log(res)
          this.firstData = res;
        })
      }
    },
    components: {
      // 或者以缩写的方式,
      Edit,
    },
    // mounted (){
    //   this.test()
    // } 
  }
</script>


<style>

</style>